<template>
  <div>
    <!-- <van-divider content-position="left"></van-divider> -->
    <div class="L-filter-container">
      <!-- 顶部 -->
      <van-row type="flex" align="center" class="L-filter-top-row">
        <van-col :span="3">
          <span class="L-small-text" @click="handleBack">返回</span>
          <!-- <i class="iconfont icon-fanhui2" style="font-size:22px" @click="handleBack"></i> -->
        </van-col>
        <van-col :span="18" class="L-text"> 筛选 </van-col>
        <van-col :span="3"> &nbsp; </van-col>
      </van-row>

      <!-- 字段 -->
      <div v-for="(item, index) in filterArr" :key="index" class="L-fliter-field-box">
        <div class="L-text L-bold-text L-margin-10">{{ item.viewcondition_title }}<span v-if="item.viewcondition_ismustcond == '1'" class="mustInp">*</span></div>
        <div>
          <FilterInput :uitype="item.viewcondition_uitype" :formItem="item" @handleUpdate="handleUpdate" />
        </div>
      </div>

      <!-- 底部按钮 -->
      <van-row :gutter="20" type="flex" align="center" class="L-filter-bottom-row">
        <van-col :span="8">
          <van-button color="#CDD0D6" style="width: 100%" @click="handleBack">取消</van-button>
        </van-col>
        <van-col :span="8">
          <van-button color="#F56C6C" style="width: 100%" @click="handleClear">清空</van-button>
        </van-col>
        <van-col :span="8">
          <van-button color="#1683f7" style="width: 100%" @click="handleSearch">查询</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
// const router  =  useRouter()
const route = useRoute()
import { ref, defineProps, reactive, defineEmits, onMounted, onActivated, watch } from 'vue'
import FilterInput from '@/components/base/Filter/FilterInput.vue'
import { closeToast, showLoadingToast, showToast } from 'vant'
import emitter from '@/utils/emitter'
import { apiConfigurable } from '@/request/api/api'

const emits = defineEmits(['back', 'handleClickFilterFind'])

const props = defineProps({
  conditionArr: {
    type: Array,
    default: []
  }
})
interface filterItemVO {
  viewcondition_field: string
  viewcondition_joinobject: string
  viewcondition_object: string
  viewcondition_refmobile: string
  viewcondition_title: string
  viewcondition_uitype: string
  viewcondition_ismustcond: string
  viewcondition_operate: string
}
const filterArr = ref<filterItemVO[]>([])

filterArr.value = props.conditionArr.map((item) => {
  const filterItem = {
    viewcondition_field: item.fieldref,
    viewcondition_fieldid: item.fieldid,
    viewcondition_joinobject: item.idjoinobject,
    viewcondition_filtertype: item.filtertype,
    viewcondition_object: '',
    viewcondition_refmobile: '',
    viewcondition_title: item.title,
    viewcondition_uitype: item.uitype,
    viewcondition_ismustcond: item.ismustcond,
    viewcondition_uitypeExp: 'normal',
    viewcondition_value: '',
    viewcondition_operate: 'inby',
    viewcondition_value_ref: ''
  }
  if (item.uitype === 'enum') {
    const allenumvalArr = item.allenumval.split(';').filter((item) => item)
    const allenumidArr = item.allenumid.split(';').filter((item) => item)

    filterItem.viewcondition_enum_property = allenumvalArr.map((item, index) => {
      const enumObj = {
        enumProperty: {
          sname: item,
          idenum: allenumidArr[index]
        }
      }
      return enumObj
    })
  }

  return filterItem
})

function handleUpdate(item, value: string = '', value_id: string = '') {
  if (value_id) {
    item.viewcondition_value = value_id
    item.viewcondition_value_ref = value
  } else {
    console.log(2323)
    item.viewcondition_value = value
  }
}

function handleBack() {
  emits('back', false)
}

function handleClear() {
  filterArr.value = filterArr.value.map((item) => {
    item.viewcondition_value = ''
    item.viewcondition_value_ref = ''
    return item
  })
  emitter.emit('clearFilterInputData')
}

function handleSearch() {
  let reg = {
    regFlag: true,
    regMessage: []
  }
  filterArr.value.forEach((i) => {
    if (i.viewcondition_ismustcond === '1' && !(i.viewcondition_value_ref || i.viewcondition_value)) {
      reg.regFlag = false
      reg.regMessage.push(`${i.viewcondition_title}不可为空`)
    }
  })
  if (!reg.regFlag) return showToast(reg.regMessage[0])
  emits('handleClickFilterFind', filterArr.value)
}
</script>

<style scoped>
.mustInp {
  color: red;
}
.L-filter-top-row {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  /* padding: 10px; */
  height: 40px;
  background: #f6f6f6;
  text-align: center;
  /* border-top: 1px solid #f6f6f6; */
}

.L-filter-bottom-row {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  /* height: 50px; */
  background: #fff;
  text-align: center;
  border-top: 1px solid #f6f6f6;
}

.L-filter-container {
  padding: 50px 0px 70px;
  background: #f6f6f6;
  height: 100vh;
  overflow: scroll;
  position: relative;
  /* padding-bottom: 60px; */
}
.L-fliter-field-box {
  margin-bottom: 10px;
  background: #fff;
  padding: 10px;
  padding-bottom: 20px;
  border-radius: 6px;
  width: 90%;
  margin: 10px auto;
}

.L-sort-type-item {
  display: flex;
  justify-content: center;
}
</style>
